<template>
  <div>
    123
    <div>&#10003</div>
    <div>√</div>
    <div class="flexBox"
         id="flexBox"
         ref="flexBoxRef">
      <div class="item item1">111</div>
      <div class="item item2">222222222222</div>
      <div class="item item3">3333333333333333333333</div>
    </div>
  </div>
</template>
<script setup lang="ts">
import utils from "@/utils.ts";
import sorts from "@/sorts";
import { onMounted, ref } from "vue";
const flexBoxRef = ref();

console.log(`quickSort`, sorts.quickSort([3,1,6,5,7,2,4]))
console.log(`bubbleSort`, sorts.bubbleSort([3,1,6,5,7,2,4]))
console.log(`selectSort`, sorts.selectSort([3,1,6,5,7,2,4]))
console.log(`insertSort`, sorts.insertSort([3,1,6,5,7,2,4]))
console.log(`mergeSort`, sorts.mergeSort([3,1,6,5,7,2,4]))
var a = 'a'
var b = 'b'
a = a+b;
b = a[0]
a = a[1]
var c = 11;
var d = 22;
// c = c + d;
// d = c - d;
// c = c - d;
[c,d] = [d,c]
console.log(`a`, a)
console.log(`b`, b)
console.log(`c`, c)
console.log(`d`, d)

</script>
<style lang="scss">
.flexBox {
  display: flex;
  width: 400px;
  border: 1px solid #f00;

  .item {
    border: 1px solid #000;
    white-space: wrap;
    word-break: break-all;
    flex: 1;
  }
  .item1 {
    // flex: 1 1 100px;
  }
  .item1 {
    // flex: 1 1 100px;
  }
  .item1 {
    // flex: 1 0 33%;
  }
}
</style>